<template>
	<view class="registration">
		<view class="nav-back">
			<view @click="toLogin" class="nav-back-icon">
				<tobackVue :ref="regToLogin"></tobackVue>
			</view>
			<view class="nav-back-text">创建账号</view>
		</view>
		<view class="registration-content">
			<view class="login-username">
				<!-- <uni-icons type="auth" size="30"></uni-icons> -->
				<view class="from-name">创建昵称</view>
				<input type="nickname" name="username" id="" maxlength="30" placeholder="请输入昵称" v-model="regsiterInfo.username" />
			</view>
			<view class="login-username">
				<!-- <uni-icons type="phone" size="30"></uni-icons> -->
				<view class="from-name">创建账号</view>
				<input type="text" name="" id="" maxlength="30" placeholder="请输入您的邮箱或手机号" v-model="regsiterInfo.phone" />
			</view>

			<!-- <view class="login-username">
				<view class="from-name">创建邮箱</view>
				<input type="text" name="" id="" placeholder="请输入邮箱号" v-model="regsiterInfo.email" />
			</view> -->
			<view class="login-password ">
				<view class="from-name">创建密码</view>
				<view class="from-pwd">
					<input type="safe-password" :password="isp" maxlength="20" placeholder="请不少于8位字母和数字的组合" v-model="regsiterInfo.password" />
					<uni-icons color="#ea5541" class="icon-pwd" type="eye" @click="changeEyeHandler"
						:type="eyeList[eyeIndex]" size="30"></uni-icons>
				</view>
			</view>
			<view class="login-password">
				<view class="from-name">确认密码</view>
				<view class="from-pwd">
					<input type="safe-password" :password="isp2" maxlength="20" placeholder="请再次输入您的密码" v-model="regsiterInfo.password2" />
					<uni-icons color="#ea5541" class="icon-pwd" type="eye" @click="changeEyeHandler2"
						:type="eyeList[eyeIndex2]" size="30"></uni-icons>
				</view>
			</view>
			<view class="login-code ">
				<view class="from-name">验证码</view>
				<view class="from-code">
					<view class="from-code-text">
						<input type="text" placeholder="请输入验证码" maxlength="4" v-model="regsiterInfo.validataCode" />
					</view>
					<view class="from-code-btn">
						<button type="primary" @click="getValiDataCode">获取验证码</button>
					</view>
				</view>
				
			</view>
		</view>
		<view class="login-button"><button type="primary" @click="register">点击注册</button></view>
		<!-- <view class="login-button"><button type="default"  @click="test">测试</button></view> -->
		<view class="reg-link">
			<view class="login-password">已有账号？</view>
			<view class="login-zhuce" @click="gotoLogin">立即登录</view>
		</view>
	</view>
</template>

<script>
	import api from "../../api/api.js"
	import tobackVue from "../../componets/toback/toback.vue";
	export default {
		data() {
			return {
				isp: true,
				isp2: true,
				regsiterInfo: {
					phone: '',
					username: '',
					emai: '',
					password: '',
					password2: '',
					validataCode:''
				},

				rules: {
					phone: {
						rule: '/^1[23456789]\d{9}$/',
						meg: '手机的格式不对'
					}
				},
				eyeList: ["eye-slash", "eye"],
				eyeIndex: 0,
				eyeIndex2: 0,
				regToLogin: 'regToLogin'
			};
		},
		components: {
			tobackVue
		},
		methods: {
			toLogin() {
				uni.$refs.regToLogin.toBack();
			},
			changeEyeHandler() {
				this.eyeIndex = this.eyeIndex === 0 ? 1 : 0;
				this.isp = this.eyeIndex === 0 ? true : false;
			},
			changeEyeHandler2() {
				this.eyeIndex2 = this.eyeIndex2 === 0 ? 1 : 0;
				this.isp2 = this.eyeIndex2 === 0 ? true : false;
			},
			getValiDataCode(){
				console.log('获取验证码');
			},
			gotoLogin(){
				uni.navigateTo({
					url:'/pages/login/login',
				})
			},
			sendRegInfo() {
				console.log(this.regsiterInfo);
				api.register(JSON.stringify(this.regsiterInfo)).then(res => {
					console.log(res)
					console.log(res.code)
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: res.msg
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/login/login"
							})
						}, 1000);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},

			register() {
				if (this.regsiterInfo.phone == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
				} else if (this.regsiterInfo.phone != '') {
					var reg = /^1[3456789]\d{9}$/;
					if (!reg.test(this.regsiterInfo.phone)) {
						uni.showToast({
							title: '请输入有效的手机号',
							icon: 'none'
						});
					} else {
						this.sendRegInfo();
					}
				}
			},

			// test(){
			// 	uni.request({
			// 		url:api.base.baseUrl+"/users/test?name=hello",
			// 		method:"get",
			// 		success: (res) => {
			// 			console.log(res.data);
			// 			console.log(res.header);
			// 		},
			// 		fail: (err) => {
			// 			console.log(err)
			// 		}
			// 	})
			// }
		},
	};
</script>

<style lang="scss">
	input {
		padding: 15rpx;
		height: 60rpx;
		width: 90%;
		border: 1rpx solid #ea5541;
		font-size: 12px;
		line-height: 20px;
		border-radius: 8px;
		color: #a8a8a8;
		background-color: #eee;
	}
	
	.from-name {
		color: #424242;
		font-weight: bold;
		font-size: 12px;
		margin-bottom: 12rpx;
	}
	.registration {
		width: 100%;
		background-position: center;
		background-size: cover;
		margin: 0px;
		background-size: 100% 100%;
		background-attachment: fixed;
		opacity: 0.8;

		font-family: '微软雅黑';
		background-color: #f8f8f8;

		.nav-back {
			margin-top: 44rpx;
			margin-bottom: 80rpx;
			display: grid;
			grid-template-columns: 1fr 4fr;

			.nav-back-icon {
				margin-left: 30px;
				// border: 1px solid red;
			}

			.nav-back-text {
				display: flex;
				justify-content: center;
				font-size: 20px;
				line-height: 26px;
				align-items: center;
				// border: 1px solid red;

			}
		}

		.registration-content {
			.login-username {
				display: flex;
				flex-direction: column;
				align-items: left;
				margin: 0 50rpx;
				margin-bottom: 50rpx;
			}

			.login-password {
				display: flex;
				flex-direction: column;
				align-items: left;
				margin: 0 50rpx;
				margin-top: 50rpx;

				.from-pwd {
					position: relative;

					.icon-pwd {
						display: block;
						position: absolute;
						right: 10%;
						top: 15px;
					}
				}
			}

			.login-code {
				margin: 50rpx;
				margin-bottom: 50rpx;
				width: 83%;
				.from-code{
					display: grid;
					grid-template-columns: 2fr 1fr;
					grid-gap: 40rpx;
				}
				.from-code-btn{
					button {
						width: 100%;
						height: 46px;
						font-size: 30rpx;
						line-height: 85rpx;
						background-color:  #ea5541;
						color: #fff;
						border-radius: 8px;
					}
				}
				
			}
		}

		.login-button {
			margin-top: 80rpx;

			button {
				margin: 0 50rpx;
				background-color: #ea5541;
				width: 83%;
				height: 56px;
				text-align: center;
				line-height: 56px;
				color: #fff;
				border-radius: 26px;
			}
		}
		
		.reg-link{
			height: 200rpx;
			font-size: 14px;
			display: flex;
			justify-content: center;
			margin-top: 100rpx;
			
			// margin-bottom: 100rpx;
			
			.login-password {
				padding: 0 5rpx;
				color: #424242;
			}
			
			.login-zhuce {
				padding: 0 5rpx;
				color: #ea5541;
			}
		}
	}

	
</style>